<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>David Bardwell CS701 Final Project</title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
    <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.23.custom.css"
          rel="stylesheet" />
    <script type="text/javascript" 
            src="js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" 
            src="js/jquery-ui-1.8.23.custom.min.js"></script>    
    
    <script src="js/initialMap.js"></script>
                
    <style type="text/css">
        #map {
	    margin: 5px;
	    width: 600px;
	    height: 600px;
	    border: 1px solid black;
        }

        #locationType {
            float : left;
        }
        
        #selectionOption {
            float : right;
        }
        
        #directionsMap {
            margin-top: 5px;
            margin-bottom: 5px;
            margin-right: 5px;
            margin-left: 10px;
            width: 600px;
            height : 600px;
            border: 1px solid black;
        }
        
        #directionsPanel {
            float : right;
            width : 30%;
            height : 100%;
            margin-top: 5px;
            margin-bottom: 5px;
            margin-right: 10px;
            margin-left: 5px;            
        }
        
        #photos {
            float : left;
        }
        
        h3 {
            display : inline;
        }

    </style>
     
    <script type="text/javascript">
        $(function(){
            var options = {event: "click",
                fx: {opacity : "toggle", 
                     duration: "fast"}};
            $("#target").tabs(options);
            $("#map").hide();
            $('#searchSelection').attr("disabled", "disabled");
            $('#nextResultButton').hide();
            $('#searchResultsTableHeader').hide();
            $("#directionsPanelFirstTab").hide();

            $("#goPlaces").click(function() {
                // get our starting location
                var userStartChoice = $('input[name="startingPosition"]:checked').val();
                setStartLocationForDirections = true;
                if (userStartChoice === 'currentLocation') {
                    // make sure there is a location selection
                    var locationSelection = $("#searchSelection").val();
                    if (locationSelection !== null && locationSelection.length > 0) {
                        $("#map").show();
                        showMap();
                    }
                }
                else {
                    var addressStreet = $("#street1").val();
                    var addressCityState = $("#cityState").val();
                    var address = addressStreet + ", " + addressCityState;
                    $("#map").show();
                    getPositionFromAddress(address);
                }
            });
            
            // allow user to get the next 20 locations (if available)
            $("#nextResultButton").click(function() {
                if (mapDataObject.mapData.length === 20) {
                    if (mapDataObject.pagination.hasNextPage === true) {
                        mapDataObject.pagination.nextPage();
                    }
                }
            });
            
            $("#goYelp").click(function() {
                testYelpAPI();
            });
            
            // load Google search items from items.xml file
            getGoogleSearchItems(); 
            
            // setup autocomplete options
            var options = {
                source : selectEntries,
                select : makeSelection
            };
            $('#searchSelection').autocomplete(options);
        });
        
        
        function testYelpAPI() {
            // TODO: will need to constuct a data list for a post for the
            // search type and details
            
            $.ajax({
                url: "php/callstub.php",
                datatype : "json",
                complete: function(xhr, result) {
                   if (result !== "success")
                        return;
                    // for some reason there is a bit of extra text before the JSON array
                    var jsonDataArray = xhr.responseText.substr(xhr.responseText.indexOf('\['));
                    var yelpJSONList = JSON.parse(jsonDataArray);
                    for (var i = 0; i < yelpJSONList.length; i++) {
                        // need to parse out each JSON string in each array element (I think)
                        var nextJSONElement = JSON.parse(yelpJSONList[i]);
                        console.log(nextJSONElement.id);
                        console.log(nextJSONElement.name);
                    }
               }
            });
        }    
        
        
        
        // request.term -- user entry
        // callback -- to return array of values
        function selectEntries (request, callback) {
            var result = [];
                
            // filter the data for matching entries on the item name
            // Only match if the search string matches from the 
            // beginning of the given name.
            result = $.grep(itemList,
                function(value, index) {
                    if (request.term.length === 1 && request.term === '*') {
                        return value.label.toLowerCase().length > 0; // all of them
                    } else {
                        return (value.label.toLowerCase().indexOf(
                            request.term.toLowerCase()) === 0);
                    }
                });
           // return the results
           callback(result);
        }
        // when a selection is made
        function makeSelection(event, ui) {
            $('#searchSelection').val(ui.item.data.name);
        }
        
    </script>     

</head>
<body>
    <div id="target">
    <ul>
        <li>
            <a href="#tab1">FindIt! Start Search</a>
        </li>
        <li>
            <a href="#tab2">FindIt! Detail Results</a>
        </li>
        <li>
            <a href="#tab3">FindIt! Reviews</a>
        </li>
    </ul>

    <div id="tab1">
        <p>Provide your starting location</p>
        
        <section id="selectionOption">
            <div id="ui-widget">
            <table>
                <tr>
                    <td><label for="searchSelection" id="search_label">Pick a category:</label></td> 
                    <td><input id="searchSelection" value="restaurant" size="30"/></td>
                    <td>
                        <button type="button" id="goPlaces">Places!</button>
                    </td>
                    <td>
                        <button type="button" id="goYelp">YELP!</button>
                    </td>
                </tr>
                <tr>
                    <td><label for="searchRadius" id="search_radius_label">Enter the search radius:</label></td>
                    <td><input type="number" id="searchRadius" value="1000"/></td>
                    <td></td>
                    <td></td>
                </tr>    
            </table>
            </div>
            
            <div id="searchResults">
                <p></p>
                <h3 id="searchResultsTableHeader">Search Result</h3>
                <button type="button" id="nextResultButton">Next 20 Results</button>
                <p></p>
                <table id="searchResultsTable">
                
                </table>
            </div>

        </section>
        
        <div id="locationType">
            <input type="radio" name="startingPosition" value="currentLocation" checked>Current Location
            <br>
            <input type="radio" name="startingPosition" value="address">From Address

            <table>
                <tr>
                    <td><label for="street1" id="street1_label">Street:</label></td> 
                    <td><input id="street1" size="30"/></td>
                </tr>
                <tr>
                    <td><label for="cityState" id="cityState_label">City, State:</label></td> 
                    <td><input id="cityState" size="30"/></td>
                </tr>
            </table>
            
            <div id="map">
                
            </div>
        </div>
        
        <div id="directionsPanelFirstTab">
            
            
        </div>
        
    </div>
        
    <div id="tab2">
        <h2>Search Detail Results</h2>
        
        <p id="locationTitle">   </p>
        
        <div id="photos">
            
        </div>
        
        
        <div id="directionsPanel">
            
            
        </div>
        
        <div id="directionsMap">
            
        
        </div>

        
        
        <div id="output">
            
        </div>
                
    
    </div>
    <div id="tab3">
        <h1>Reviews</h1>
                
                
                
                
                
    </div>
    </div>
</body>
</html>
